<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            background-color: #03030a;
            min-width: 800px;
            min-height: 400px;
        }

        img {
            width: 20%;
            float: left;
            /*Filter styles*/
            margin: 0;
        }

        .saturate {
            -webkit-filter: saturate(3);
        }

        .grayscale {
            -webkit-filter: grayscale(100%);
        }

        .contrast {
            -webkit-filter: contrast(160%);
        }

        .brightness {
            -webkit-filter: brightness(0.25);
        }

        .blur {
            -webkit-filter: blur(3px);
        }

        .invert {
            -webkit-filter: invert(100%);
        }

        .sepia {
            -webkit-filter: sepia(100%);
        }

        .huerotate {
            -webkit-filter: hue-rotate(180deg);
        }

        .rss.opacity {
            -webkit-filter: opacity(50%);
        }
    </style>
</head>
<body>
<!--- img src http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/500px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg -->
<img alt="Mona Lisa" src="img/MonaLisa.jpg" title="original">
<img alt="Mona Lisa" src="img/MonaLisa.jpg" title="saturate" class="saturate">
<img alt="Mona Lisa" src="img/MonaLisa.jpg" title="grayscale" class="grayscale">
<img alt="Mona Lisa" src="img/MonaLisa.jpg" title="contrast" class="contrast">
<img alt="Mona Lisa" src="img/MonaLisa.jpg" title="brightness" class="brightness">
<img alt="Mona Lisa" src="img/MonaLisa.jpg" title="blur" class="blur">
<img alt="Mona Lisa" src="img/MonaLisa.jpg" title="invert" class="invert">
<img alt="Mona Lisa" src="img/MonaLisa.jpg" title="sepia" class="sepia">
<img alt="Mona Lisa" src="img/MonaLisa.jpg" title="huerotate" class="huerotate">
<img alt="Mona Lisa" src="img/MonaLisa.jpg" title="opacity" class="rss opacity">
</body>
</html>